<%- include('../layout') %>

<% contentFor('body') { %>
<% currentPath = '/users' %>
<div class="container-fluid">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>用户管理</h2>
    <a href="/admin/users/add" class="btn btn-success">
      <i class="fa fa-plus"></i> 添加用户
    </a>
  </div>
  
  <!-- 搜索框 -->
  <div class="card mb-4">
    <div class="card-body">
      <form action="/admin/users" method="get" class="row g-3">
        <div class="col-md-4">
          <input type="text" class="form-control" placeholder="搜索用户名或邮箱" name="search" value="<%= search || '' %>">
        </div>
        <div class="col-md-2">
          <select class="form-select" name="membershipLevelId">
            <option value="">所有等级</option>
            <% membershipLevels.forEach(level => { %>
            <option value="<%= level.id %>" <%= membershipLevelId == level.id ? 'selected' : '' %>><%= level.name %></option>
            <% }); %>
          </select>
        </div>
        <div class="col-md-2">
          <button type="submit" class="btn btn-primary w-100">搜索</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 用户列表 -->
  <div class="card">
    <div class="card-body">
      <% if (users.length > 0) { %>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>会员等级</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <% users.forEach(user => { %>
          <tr>
            <td><%= user.id %></td>
            <td><%= user.username %></td>
            <td><%= user.email %></td>
            <td>
              <span class="badge" style="background-color: <%= user.membershipLevel?.color || '#6c757d' %>">
                <%= user.membershipLevel?.name || '普通用户' %>
              </span>
            </td>
            <td><%= new Date(user.createdAt).toLocaleString() %></td>
            <td>
              <div class="btn-group">
                <a href="/admin/users/edit/<%= user.id %>" class="btn btn-sm btn-primary">编辑</a>
                <a href="/admin/users/delete/<%= user.id %>" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除该用户吗？')">删除</a>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
      
      <!-- 分页 -->
      <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
          <li class="page-item <%= pagination.currentPage === 1 ? 'disabled' : '' %>">
            <a class="page-link" href="/admin/users?page=<%= pagination.currentPage - 1 %>&search=<%= search || '' %>&membershipLevelId=<%= membershipLevelId || '' %>">上一页</a>
          </li>
          <% for (let i = 1; i <= pagination.totalPages; i++) { %>
          <li class="page-item <%= i === pagination.currentPage ? 'active' : '' %>">
            <a class="page-link" href="/admin/users?page=<%= i %>&search=<%= search || '' %>&membershipLevelId=<%= membershipLevelId || '' %>"><%= i %></a>
          </li>
          <% } %>
          <li class="page-item <%= pagination.currentPage === pagination.totalPages ? 'disabled' : '' %>">
            <a class="page-link" href="/admin/users?page=<%= pagination.currentPage + 1 %>&search=<%= search || '' %>&membershipLevelId=<%= membershipLevelId || '' %>">下一页</a>
          </li>
        </ul>
      </nav>
      <% } else { %>
      <p class="text-center text-muted">暂无用户数据</p>
      <% } %>
    </div>
  </div>
</div>
<% } %>